/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-26 14:52:51
 * @LastEditors: chenbinfa
 * @LastEditTime: 2023-01-17 11:38:35
 * @description: 描述信息
 * @author: chenbinfa
 */
import React, { useRef, useState, useEffect } from "react";
import { Pie } from '@ant-design/plots';
import { message } from "antd";
import { CopyOutlined } from "@ant-design/icons";
import _ from "lodash";
import styled from "styled-components";
import moment from "moment";
import { formatterCurrency, formatterCurrencyStr, toLocaleString, formatSize, formatterSize, toFixed } from "@utils/format";
import { formatArr } from "@utils/format-show-type";
import common from "@utils/common";
import copy from "copy-to-clipboard";
import api from "@services/";
import DCard from "@/components/DCard";
import * as antdHelper from "@utils/antd-helper";
const Main = ({ className, accountInfo }) => {
    if (!accountInfo) {
        return '';
    }

    const [config, setConfig] = useState();//overview Pie config
    const [assetInfos, setAssetInfos] = useState();
    const [currAssetInfo, setCurrAssetInfo] = useState();
    const [roles, setRoles] = useState([]);
    const [status, setStatus] = useState([]);



    const formatAsset = (d) => {
        d.balance = parseInt(d.balance || 0);
        d.staking = parseInt(d.staking || 0);
        d.available = parseInt(d.available || 0);

        let balance = formatterCurrency(d.balance);
        let staking = formatterCurrency(d.staking);
        let available = formatterCurrency(d.available);

        d.balance = parseFloat((d.balance / 1e18).toFixed(2));
        d.staking = parseFloat((d.staking / 1e18).toFixed(2));
        d.available = parseFloat((d.available / 1e18).toFixed(2));

        let data = [
            {
                i: 1,
                n: d.balance,
                str: balance.n + ' ' + balance.unit,
                label: 'Balance',
                per: d.balance == '0' || d.balance == 0 ? '0%' : toFixed((d.balance * 100) / d.balance) + '%'
            },
            {
                i: 2,
                n: d.staking,
                str: staking.n + ' ' + staking.unit,
                label: 'Staking',
                per: d.staking == '0' || d.staking == 0 ? '0%' : toFixed((d.staking * 100) / d.balance) + '%'
            },
            {
                i: 3,
                n: d.available,
                str: available.n + ' ' + available.unit,
                label: 'Available',
                per: d.available == '0' || d.available == 0 ? '0%' : toFixed((d.available * 100) / d.balance) + '%'
            }
        ];
        // console.log("d.available",d.available);
        setAssetInfos(data);
        setCurrAssetInfo(data[0]);
        const configs = {
            appendPadding: 0,
            padding: 10,
            data: data.slice(-2),
            angleField: 'n',
            colorField: 'label',
            radius: 1,
            innerRadius: 0.85,
            color: ['#6493fe', '#274aa4'],
            label: false,
            legend: false,
            statistic: {
                title: false,
                content: {
                    content: '',
                },
            },
        };
        setConfig(configs);
    }
    const formatRoles = (d) => {
        let arrRole = [];
        let arrStatus = [];
        if (d.is_storage) {
            arrRole.push("Storage Miner");
            arrStatus.push({ label: d.Storage.state, value: 'Liquidation: ' + d.Storage.liquidation + '/3' });
        }
        if (d.is_consensus) {
            arrRole.push("Consensus Miner");
            let credit = d.Consensus.credit || 0;
            arrStatus.push({ label: d.Consensus.status, value: 'Credit: ' + credit });
        }
        if (arrRole.length == 0) {
            arrRole.push("None");
        }
        if (arrStatus.length == 0) {
            arrStatus.push({ label: "None", value: '' });
        }
        setRoles(arrRole);
        setStatus(arrStatus);
    }

    useEffect(() => {
        formatAsset(accountInfo.Asset);
        formatRoles(accountInfo);
    }, [accountInfo]);


    return (
        <div className={className}>
            <div className="overview">
                <div className="left">
                    <div className="box1">
                        <DCard className="bbbox" icon={<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/holder.png"} />} title="Account">
                            <div className="info enable-copy-txt-box" onClick={() => {
                                copy(accountInfo.accountId);
                                message.success("Copied");
                            }}>{accountInfo.accountId} <CopyOutlined className="copy-icon" /></div>
                        </DCard>
                    </div>
                    <div className="box2">
                        <DCard className="bbbox" icon={<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/u35.png"} />} title="Role">
                            <div className="role-box">
                                {
                                    roles.length == 0 ? <div className="info">None</div> : roles.map(t => {
                                        return <div className="bitem" key={t}>{t}</div>
                                    })
                                }
                            </div>
                        </DCard>
                        <DCard className="bbbox" icon={<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/u36.png"} />} title="Status">
                            <div className="role-box">
                                {
                                    status.length == 0 ? <div className="info">None</div> : status.map(t => {
                                        return <div className="bitem" key={t.label}><span>{t.label}</span><span>{t.value}</span></div>
                                    })
                                }
                            </div>
                        </DCard>
                    </div>
                </div>
                <div className="right">
                    {assetInfos &&
                        <DCard className="bbbox" icon={<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/cess.png"} />} title="Asset">
                            <div className="box">
                                <div className="bleft">
                                    {config && <Pie {...config} />}
                                    {currAssetInfo &&
                                        <div className="zx">
                                            <span>{currAssetInfo.per}</span>
                                            <label>{currAssetInfo.label}</label>
                                            <span>{currAssetInfo.str}</span>
                                        </div>
                                    }
                                </div>
                                {
                                    assetInfos &&
                                    <div className="bright">
                                        <div className="t2" onMouseOver={() => setCurrAssetInfo(assetInfos[0])}>{assetInfos[0].label}</div>
                                        <div className="t1 banlance" onMouseOver={() => setCurrAssetInfo(assetInfos[0])}>{assetInfos[0].str}</div>
                                        <div className="t3" onMouseOver={() => setCurrAssetInfo(assetInfos[1])}>
                                            <div className="t3-1"></div>
                                            <span>
                                                <font>{assetInfos[1].label}</font>
                                                <label className="banlance">{assetInfos[1].str}</label>
                                            </span>
                                        </div>
                                        <div className="t3" onMouseOver={() => setCurrAssetInfo(assetInfos[2])}>
                                            <div className="t3-2"></div>
                                            <span>
                                                <font>{assetInfos[2].label}</font>
                                                <label className="banlance">{assetInfos[2].str}</label>
                                            </span>
                                        </div>
                                    </div>
                                }
                            </div>
                        </DCard>}
                </div>
            </div>
        </div>
    );
};

export default React.memo(styled(Main)`
    .overview{
        display: flex;
        flex-direction: row;
        justify-content:space-between;
        margin-bottom: 20px;
        .left{
            width:65%;
            .info{
                line-height: 38px;
                height: 38px;
                color: #090909;
                font-size: 18px;
                padding:30px 20px;
            }
            .box1{
                            
            }
            .box2{
                display: flex;
                flex-direction: row;
                margin-top:20px;
                justify-content: space-between;
                .role-box{
                    display: block;
                    margin:0 20px;
                    height:90px;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                }
                .bitem{
                    width:100%;
                    line-height: 32px;
                    display: flex;
                    justify-content: space-between;
                }
                .bbbox{
                    width: calc(50% - 10px) ;
                }
                .bbbox:first-child{
                    margin-right:10px;
                }
                .bbbox:last-child{
                    margin-left:10px;
                }
                .extra-box{
                    width:100px;
                    height:30px;
                    line-height: 30px;
                    display: flex;
                    overflow: hidden;
                    align-items: center;
                    justify-content: space-between;
                    background-color: #000;
                    border-radius: 6px;
                    padding: 0 10px;
                    cursor: pointer;
                    span{
                        color:#fff;
                        font-weight: lighter;
                    }
                    img{
                        width:16px;
                    }
                }
                .extra-box:hover{
                    background-color: #353535;
                }	                	
            }
        }
        .right{
            width:calc(35% - 20px);
            .box{
                position: relative;
                top:0;
                width: 100%;
                overflow: hidden;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                .bleft{
                    width:240px;
                    height:269px;
                    position: relative;
                    top:0;
                    left:10px;                
                    .zx{
                        position: absolute;
                        width: 167px;
                        height: 167px;
                        background-color: #fff;
                        border-radius: 100%;
                        top: 51px;
                        left: 36px;
                        z-index: 0;
                        color:#000;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        font-size:14px;
                        line-height: 28px;
                        label{
                            color: #6B7486;
                        }
                    }
                }
                .bright{
                    margin-top: 46px;
                    display: flex;
                    flex-direction: column;
                    width: 40%;
                    .t1{
                        font-size: 14px;
                        margin:10px 0;
                    }
                    .t2{
                        font-size: 14px;						
                        color: rgb(107, 116, 134);
                    }
                    .t3{
                        display: flex;
                        flex-direction: row;
                        margin-top:10px;
                        div{
                            width:6px;
                            height:28px;
                            display: block;
                            overflow: hidden;
                            border-radius: 6px;
                        }
                        .t3-1{
                            background-color: rgb(173, 197, 250);
                        }
                        .t3-2{
                            background-color: rgb(60, 104, 206);
                        }
                        span{
                            margin-left:20px;
                            display: flex;
                            flex-direction: column;
                            label{
                                height:20px;
                                padding-top:10px;
                                font-size: 14px;
                                color: rgb(0, 0, 0);
                                display: flex;
                                flex-direction: row;
                            }
                            font{
                                font-size: 13px;
                                color: rgb(107, 116, 134);
                            }
                        }
                    }
                }
            }
        }
    }
    @media screen and (min-width: 700px) and (max-width: 1300px) {
        .overview{
            flex-direction: column!important;
            .left,.right{
                    width:100%!important;
                }
                .right{
                    margin-top:20px;
                }
        }
	}
	@media screen and (max-width: 700px) {
		.overview{
			flex-direction: column!important;
			.left{
				flex-direction: column!important;
				width:100%!important;
				.box2{
					width:100%!important;
					flex-direction: column!important;
					.bbbox{
						width:100%!important;						
					}
					.bbbox:last-child{
						margin-top:20px;
						margin-left:0!important;
					}
				}
                .enable-copy-txt-box{
                    width:calc(100% - 40px);
                    word-wrap: break-word; 
	                overflow-wrap: break-word;
                    padding: 10px 20px!important;
                    height:auto!important;
                    line-height: 28px!important;
                }
			}
			.right{
				width:100%!important;
				margin-top:20px;
				.bright{
					width: 36%!important;
					.t1{
						font-size: 22px!important;
					}
				}
			}
		}
		.box-con {
			.box {
				width: 50%;
			}
		}
	}
`);
